<template>
   <div>
      <slot name="main"></slot>
      <slot name="middle-left"></slot>
      <slot name="middle-right"></slot>
      <slot name="slide"></slot>
      <van-tabbar v-model="activ" class="tab-bar">
          <van-tabbar-item icon="home-o" name="home" to="/home" >职位</van-tabbar-item>
          <van-tabbar-item icon="records" name="articletitle" to="/articletitle" >好文</van-tabbar-item>
          <van-tabbar-item icon="notes-o" name="interviewtitle" to="/interviewtitle" >面试题</van-tabbar-item>
          <van-tabbar-item icon="user-o" name="myhome" to="/myhome">我的</van-tabbar-item>
      </van-tabbar>
   </div>
</template>
<script>
export default {
  name:'Bottom',
  data(){
     return {
        activ: ""  
     }
  },
  props:[
     "active"
  ],
  mounted(){
   //   这里有个坑，要使用active一定要拿一个data的变量去接收保存
      this.activ = this.active;
  }
  
}
</script>
<style scoped>
.van-tabbar-item--active,.tab-bar{
   background-color: #ebe0e0;
}

</style>